<template>
	<view >
		<view class="body">
			<view class="header">
				<view class="search">
					<uni-search-bar  placeholder="搜植物名称,找护养知识" @confirm="search" :radius="100"></uni-search-bar>
				</view>
				<view class="nav">
				    <view  @click="changeState(0)"   :class="[state==0?'active':'']">推荐</view>
				    <view  @click="changeState(1)"   :class="[state==1?'active':'']">花卉大全</view>
				</view>
			</view>
			<view v-if="state==0">
			   	 <swiper indicator-dots="true" autoplay="true" interval="2000" circular="true">
					<swiper-item>
						<image src="https://s2.loli.net/2023/01/04/PALxJ576W9DG3mr.jpg"> </image>
					</swiper-item>
					<swiper-item>
						<image src="https://s2.loli.net/2023/01/04/JMAe8Yl4DzdNu2b.jpg"> </image>
					</swiper-item>
					<swiper-item>
						<image src="https://s2.loli.net/2023/01/04/osmQ2BxtdqcWk6z.jpg"> </image>
					</swiper-item>
				</swiper>
				<view class="content" @click="go(w.articleId)" v-for="w in list">
					<view class="titles" >
						<text selectable='true'>{{w.title}}</text>
					</view>
					<view class="img">
						<image :src="w.imgData"></image>
					</view>
				</view>
		   </view>
		   <view v-if="state==1">
				<view class="title">
				  <view @click="changestate(1)"  class="item1" :class="[states==1?'active1':'']">草本植物</view>
				  <view @click="changestate(2)"  class="item1" :class="[states==2?'active1':'']">木本植物</view>
				  <view @click="changestate(3)"  class="item1" :class="[states==3?'active1':'']">藤本植物</view>
				  <view @click="changestate(4)"  class="item1" :class="[states==4?'active1':'']">兰科植物</view>
				  <view @click="changestate(5)"  class="item1" :class="[states==5?'active1':'']">水生植物</view>
				  <view @click="changestate(6)"  class="item1" :class="[states==6?'active1':'']">球根植物</view>
				  <view @click="changestate(7)"  class="item1" :class="[states==7?'active1':'']">宿根植物</view>
				</view>
				<view  v-for="v in alist">
				   <view class="aboutseed" @click="goodsdetail(v.plantId,states)">
					   <view class="seedname">{{v.plantName}}</view>
					   <image :src="imageUrl+v.pictureUrl"></image> 
					  <view class="species"></view>
					</view>
				</view>
				<!-- <uni-pagination @change="pageChange" :total="total" :pageSize="pageSize" :current="page"></uni-pagination> -->
		   </view>
		</view>
	</view>
</template>

<script>
	import http from "../../utils/http.js"
	export default {
		data() {
			return {
				state:'0',
				states:1,
				showlist:[],//展示的数据
				alist:[],//所有的数据
				page:1,
				pageSize:5,
				imageUrl:"http://mnxc.xyz:8080/common/download?name=",
				searchP:"",
				Pname:[],
				list:[
					
				]
			}
		},
		onLoad() {

		},
		onShow() {
			this.getlist()
			this.getarticle()
		},
		methods: {
			getarticle(){
				http({
					url:`/article/page`,
					params:{
						pageSize:this.pageSize,
						page:this.page
					},
					success:(res)=>{
						// console.log(res.data.data);
						this.list=res.data.data.records;
						// console.log(this.alist);
					}
				})
			},
			go(titleid){
				uni.setStorageSync('titleid',titleid);
				uni.navigateTo({
					url:'/pages/index/referral'
				})
			},
			search(res) {
				// this.$refs.popup.open('top')
				if (res.value == ''){
					uni.showToast({
						title: '请先输入',
						icon: 'none'
					})
				}else {
					//先清空展示的数据
					this.showlist = [];
					//然后开始循环全部数据
					for (var i = 0; i < this.alist.length; i++) {
						//判断数据里面是否有符合输入的内容  不符合返回-1 只需要大于或等于0就是符合
						// if (this.alist[i].plantName.indexOf(res.value) >= 0) {
						// 	this.showlist.push(this.alist[i]);
						// 	this.goodsdetail(this.showlist[i].plantId,this.states)
						// 	// console.log(res.value)
						// 	// console.log(this.showlist);
						// }
						if(this.alist[i].plantName != res.value){
							uni.showToast({
								title: '没有搜到你想要的哦',
								icon: 'none'
							})
						}
						if(this.alist[i].plantName==res.value){
							this.goodsdetail(this.alist[i].plantId,this.states)
						}
					}
				}
			},
			getlist(){
				http({
					url:`/plant/page`,
					params:{
						pageSize:this.pageSize,
						page:this.page
					},
					success:(res)=>{
						// console.log(res.data.data.records);
						this.alist=res.data.data.records;
						// console.log(this.alist);
					}
				})
			},
			changeState(state){
				  this.state=state;
			},
		    changestate(states){
		   	   this.states=states;
		   	   this.page=this.states;
		   	   if(states==1){
		   		   
		   	   }
		   	   this.getlist()
		    },
		   goodsdetail(id,ids){
		   	   uni.setStorageSync('state',id),
		   	   uni.setStorageSync('states',ids)
		   	   uni.navigateTo({
		   	   url:'/pages/index/Fdetail',
		   	   })
		   }
		}
	}
</script>

<style>
	.body{
		padding: 0 30rpx;
	}
	.header{
		width: 690rpx;
		height: 140rpx;
	}
	.nav{
		display: flex;
		justify-content: space-between;
		height: 70rpx;
		align-items: center;
	}
	.nav .active{
	  color: #000;
	  font-weight: 700;
	  font-size: 40rpx;
	  border-bottom: 5px solid #41c20c;
	 }
	swiper{
		margin-top: 40rpx;
		width: 690rpx;
		height: 300rpx;
		border-radius: 20px;
		overflow:hidden;
	}
	swiper swiper-item{
		width: 690rpx;
		height: 300rpx;
	}
	swiper swiper-item image{
		width: 690rpx;
		height: 300rpx;
	}
	.content{
		margin-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		height: 230rpx;
	}
	.titles{
		/* 14个字应该换行 */
		margin: 0 5rpx;
		width: 450rpx;
		text-align: left;
	}
	.titles text{
		white-space: pre-wrap;
		word-wrap:break-word;
	}
	.img{
		text-align: right;
	}
	.img image{
		width: 220rpx;
		height: 180rpx;
		margin: 0 5rpx;
	}
	
	.active{
		 color: #000;
		 font-weight: 700;
		 font-size: 40rpx;
		 border-bottom: 5px solid #41c20c;
	 }
	 .item1.active1{
	 	 color: #000;
	 	 font-weight: 700;
	 	 font-size: 34rpx;
	 }
	 .title{
		 margin-top: 30rpx;
		 border: 1rpx solid #f5f5f5;
		 width: 690rpx;
		 display: flex;
		 flex-wrap: wrap;
		 box-shadow: 10rpx 10rpx 10rpx #eee;
		 border-radius: 10rpx;
	 }
	 .title>view{
		 padding: 20rpx;
	 }
	 .aboutseed{
		 width: 100%;
		 height: 240rpx;
		 border-bottom: 1px solid #eee;
		 display: flex;
		 cursor: pointer;
	 }
	 .aboutseed image{
		 position: absolute;
		 width: 250rpx;
		 height: 200rpx;
		 border-radius: 10rpx;
		 margin-left: 435rpx;
		 margin-top: 20rpx;
	 }
	 .seedname{
		 margin-top: 30rpx;
		 font-size: 40rpx
	 }
	 .species{
		 position: absolute;
		 margin-top: 180rpx;
		 font-size: 27rpx;
		 color: #8d8d8d;
	 }
	
</style>
